import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { SearchBar, Icon, Tabs } from 'antd-mobile';
import styled from 'styled-components';
import * as userActions from 'actions/user';
import * as friendActions from 'actions/friend';
import UserItem from 'components/userItem';
import NavBar from 'components/navBar';
import Friend from './friend';
import Group from './group';

const Wrapper = styled.ul`
    background-color: #fff;
    border-bottom: 1px solid #ddd;
`


export default class Add extends Component {
    render() {
        const tabs = [
            {
                title: <span>好友</span>
            },
            {
                title: <span>群组</span>
            }
        ]
        return (
            <div>
                <NavBar
                    icon={<Icon type="left" />}
                    rightContent={<span>添加</span>}
                    onLeftClick={() => { this.props.history.push('/home'); }}
                >
                    添加
                </NavBar>
                <Tabs tabBarPosition='top' tabs={tabs} animated={false}>
                    <Friend />
                    <Group />
                </Tabs>
                
            </div>
        )
    }
}